import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/home",
    component: () => import("@/views/layout"),
    children: [
      {
        path: "home",
        component: () => import("@/views/home"),
        meta: {
          title: "主页",
          path: "/home",
        },
      },
    ],
  },
  {
    path: "/login",
    component: () => import("@/views/login"),
  },
];
// 定义各个路由
const home = {
  path: "home",
  component: () => import("@/views/home"),
  //   meta: {
  //     title: "主页",
  //     path: "/home"
  //   },
};
const reserve = {
  path: "reserve",
  component: () => import("@/views/reserve"),
  meta: {
    title: "图书列表",
    path: "/reserve",
  },
};
const userBorrow = {
  path: "userBorrow",
  component: () => import("@/views/userBorrow"),
  meta: {
    title: "图书列表",
    path: "/userBorrow",
  },
};
const superUser = {
  path: "superUser",
  component: () => import("@/views/superUser"),
  meta: {
    title: "管理员管理",
    path: "/superUser",
  },
};
const user = {
  path: "user",
  component: () => import("@/views/user"),
  meta: {
    title: "用户管理",
    path: "/user",
  },
};
const classify = {
  path: "classify",
  component: () => import("@/views/classify"),
  meta: {
    title: "分类管理",
    path: "/classify",
  },
};
const shelf = {
  path: "shelf",
  component: () => import("@/views/shelf"),
  meta: {
    title: "书架管理",
    path: "/shelf",
  },
};
const list = {
  path: "list",
  component: () => import("@/views/list"),
  meta: {
    title: "图书管理",
    path: "/list",
  },
};
const borrow = {
  path: "borrow",
  component: () => import("@/views/borrow"),
  meta: {
    title: "借阅管理",
    path: "/borrow",
  },
};
const back = {
  path: "back",
  component: () => import("@/views/back"),
  meta: {
    title: "还书管理",
    path: "/back",
  },
};
const ruleMapping = {
  //   home,
  superUser,
  user,
  classify,
  shelf,
  list,
  borrow,
  reserve,
  userBorrow,
  back,
};

export function initRoutes() {
  // console.log(1111);
  const currentRoutes = router.options.routes;
  const menuList = store.state.menuList;
  menuList.forEach((item) => {
    if (item.children) {
      item.children.forEach((key) => {
        if (key.path) {
          currentRoutes[0].children.push(ruleMapping[key.path]);
        }
      });
    } else {
      if (item.path) {
        currentRoutes[0].children.push(ruleMapping[item.path]);
      }
    }
  });
  for (let i = 0, length = currentRoutes.length; i < length; i += 1) {
    const element = currentRoutes[i];
    router.addRoute(element);
  }
}

const router = new VueRouter({
  mode: "history",
  routes,
  base: process.env.BASE_URL,
});

// 白名单 无需登录可以访问的路由地址
let whiteList = ["/login", "/reg"];
router.beforeEach((to, from, next) => {
  // 有 token 值获取用户信息
  const token = store.state.token;
  if (token) {
    // if (!store.state.userInfo.username)
    //   store.dispatch('updadeUserInfo')

    // console.log(to);
    // console.log(from);
    // console.log(router.options.routes[0].children);
    // console.log(router.options.routes[0].children.length===1);
    if (router.options.routes[0].children.length === 1) {
      initRoutes();
      next({ ...to, replace: true });
    }

    next();
  } else {
    // 未登录
    // 数组.includes(值) 判断值是否在数组里出现过，出现过原地返回true
    if (whiteList.includes(to.path)) {
      // 未登录，可以访问的路由地址，则放行 路由全局前置守卫不会在触发，而是匹配路由表，让组件挂载
      next();
    } else {
      // next()强制切换到登录路径上
      next("/login");
    }
  }
});
export default router;
